<template>
  <div class="login-box">
    <el-card class="box-card">
      <!-- slot="header"写法是一个废弃了的语法 -->
      <!-- 他是很早很早以前的具名插槽的写法 -->
      <template #header>
        <div class="title">
          黑马面经运营后台
        </div>
      </template>

      <!-- 默认插槽 -->
      <template>
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-position="top"
          label-width="100px"
          class="demo-ruleForm"
        >
        <!-- el-form-item就是每一行 -->
        <!-- 他有个属性叫prop就是绑定的规则名字 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item style="text-align:center">
            <el-button @click="login" type="primary">登录</el-button>
            <el-button @click="$refs.form.resetFields()">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'LoginIndex',
  data () {
    return {
      // 跟表单做数据绑定的对象
      form: {
        username: '',
        password: ''
      },

      // 规则对象
      rules: {
        username: [
          // 必填，message：弹出的错误提示， trigger触发校验的时机
          { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
          // min 最小位数  max 最大位置
          { min: 5, max: 11, message: '长度在 5 到 11 个字符之间', trigger: ['change', 'blur'] }
        ],
        password: [
          // 必填，message：弹出的错误提示， trigger触发校验的时机
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          // min 最小位数  max 最大位置
          { min: 5, max: 11, message: '长度在 5 到 11 个字符之间', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    // 登录的点击事件
    async login () {
      try {
        await this.$refs.form.validate()
        // 代表全部通过，发请求去做登录
        this.$store.dispatch('user/login', this.form)
      } catch {}
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped：让样式只能作用于当前页面,只能作用到当前组件里写过的标签
// 不包括组件内部的标签
// 既要用scoped，又希望这个样式能作用到组件内部
// 这个时候要用到深度作用选择器  ::v-deep（less、scss也支持）
// 深度作用选择器还有两种写法：
//    /deep/ (less支持，scss不支持)
//    >>> 也是只支持less
@import '@/styles/variable.scss';
.login-box {
  min-height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center / cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .box-card {
    width: 420px;

    ::v-deep .el-card__header {
      padding: 0;
      .title {
        height: 60px;
        background-color: $--color-primary;
        color: #fff;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
</style>
